import React from 'react';
import { Table, Switch } from 'antd';

import { getUid } from '@/utils/utils'

interface CustomerTableProps {
  dataSource: any[],
  onEdit: Function,
  onDel: Function,
  onRowClick: Function,
  onChangeWorkStatus:Function,

}

const CustomerTable: React.FC<any> = (props: CustomerTableProps) => {

  const { onEdit, onDel, onRowClick,onChangeWorkStatus, ...tableProps } = props;

  const onRow = (record: any) => {
    return {
      onClick: (event: any) => {
        onRowClick(record)
      },
    };
  }

  const columns = [
    {
      title: '姓名',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '年龄',
      dataIndex: 'age',
      key: 'age',
    },
    {
      title: '身高',
      dataIndex: 'height',
      key: 'height',
      render: (text: number) => (
        <span>{text}(cm)</span>
      )
    },
    {
      title: '体重',
      dataIndex: 'weight',
      key: 'weight',
      render: (text: number) => (
        <span>{text}(kg)</span>
      )
    },
    {
      title: '现居地',
      dataIndex: 'city',
      key: 'city',
    },
    {
      title: '在职',
      dataIndex: 'work',
      key: 'work',
      render:(text:any,record:any)=>(
        <Switch defaultChecked={text} onClick={()=>{onChangeWorkStatus(record)}}/>
      )
    },
    {
      title: '编辑',
      key: 'action',
      render: (record: any) => (
        <span>
          <a style={{ marginRight: 16 }} onClick={() => { onEdit(record) }}>编辑</a>
          <a onClick={() => { onDel(record) }}>删除</a>
        </span>
      ),
    }
  ];


  return (
    <div>
      <Table {...tableProps} onRow={onRow} columns={columns}  bordered rowKey={() => getUid()} />
    </div>
  )
}

export default CustomerTable;